<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .price {
            color: chartreuse;
            font-size: large;
            font-style: italic;
        }

        .red {
            color: red;
        }

        .orange {
            color: orange;
        }

        .yellow {
            color: yellow;
        }
    </style>
</head>

<body>
    <div id="app">
        <!--双花括号、文本插值：放变量。
        插值是指用变量的内容替换文本中的{变量名}。插值的结果是一段新的文本。-->
        <p>{{age}}</p>
        <p>{{name}}</p>
        <hr>

        <!--v-model双向绑定-->
        <!--指令：写在标签上，当作标签属性，作用是操作标签-->
        <input type="text" v-model="text">
        <p>{{text}}</p>
        <hr>

        <p>以下是指令</p>
        <!--显示文本-->
        <p v-text="text2"></p>
        <!--显示带有html格式的文本-->
        <p v-html="text2"></p>
        <hr>

        <!--已登录-->
        <button v-if="islogin">退出登录</button>
        <!--未登录-->
        <button v-else>请登录</button>
        <br>
        <hr>

        <!--已登录-->
        <button v-show="islogin">退出登录</button>
        <!--未登录-->
        <button v-show="!islogin">请登录</button>
        <br>
        <hr>
        <!--@click即v-on:click-->
        <button @click="islogin = !islogin">切换登录状态</button>
        <br>
        <hr>

        <!--v-for，循环，遍历数组-->
        <span v-for="item in gongFu">降龙十八掌-第{{item}}招</span>
        <div v-for="item in gongFu">闪电五连鞭-第{{item}}招</div>
        <div v-for="(item,index) in gongFu2">
            降龙十八掌-第{{index+1}}招，名称：{{item.name}}，价格：￥
            <span class="price">{{item.price.toFixed(2)}}</span> 元
        </div>

        <p>v-bind：绑定标签属性，语法糖形式:。:就代指v-bind</p>
        <p v-bind:class="dawa">大娃</p>
        <p v-bind:class="erwa">二娃</p>
        <p v-bind:class="sanwa">三娃</p>

        <p>v-on：事件监听，语法糖形式@</p>
        <button v-on:click="say()">click</button>


    </div>
    <script src="./vue.js"></script>
    <script>
        //1.实例化
        let vm = new Vue({
            //2.添加选项参数
            //3.作用的元素
            el: '#app',
            //4.数据的初始化
            data: {
                age: 18,
                name: 'vutal',
                text: 'hello vue',
                text2: '<mark>hello vue</mark>',
                //判断是否登录
                islogin: false,
                gongFu: [1, 2, 3, 4, 5],
                gongFu2: [
                    { name: '亢龙有悔', price: 5 },
                    { name: '飞龙在天', price: 5 },
                    { name: '见龙在田', price: 5 },
                    { name: '鸿渐于陆', price: 5 },
                    { name: '潜龙勿用', price: 5 },
                    { name: '利涉大川', price: 5 },
                    { name: '突如其来', price: 5 },
                    { name: '震惊百里', price: 5 },
                    { name: '或跃在渊', price: 5 },
                    { name: '双龙取水', price: 5 },
                    { name: '鱼跃于渊', price: 5 },
                    { name: '时乘六龙', price: 5 },
                    { name: '密云不雨', price: 5 },
                    { name: '损则有孚', price: 5 },
                    { name: '龙战于野', price: 5 },
                    { name: '履霜冰至', price: 5 },
                    { name: '羝羊触蕃', price: 5 },
                    { name: '神龙摆尾', price: 5 }
                ],
                dawa: 'red',
                erwa: 'orange',
                sanwa: 'yellow'
            },
            //方法，函数
            methods: {
                say() {
                    console.log('发生甚么事？');
                }
            }
        });
    </script>
</body>

</html>